console.log(THREE);

//1.创建渲染器
// let renderer = new THREE.WebGLRenderer({
//     canvas:document.querySelector('#mainCanvas')
// })

let renderer = new THREE.WebGLRenderer({
    antialias:true //抗锯齿
});

console.log(renderer);
//设置渲染器的尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
//设置渲染器的颜色
// renderer.setClearColor(0xEEEEEE);  //灰色
//把canvas标签添加到body内
document.body.appendChild(renderer.domElement);

//2.创建场景 摄影棚
let scene = new THREE.Scene();

//3.照相机 透视相机 相对数值 fov:视角角度  渲染器的宽高比  照相机能看到的最近距离   照相机能看到的最远距离
let camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000); 

//正交投影相机 left right top bottom near far
// let w = window.innerWidth,
//     h = window.innerHeight;
// let camera = new THREE.OrthographicCamera(-w/2,w/2,h/2,-h/2,1,1000);

//设置照相机的位置
camera.position.z = 50;
camera.position.y = 20;
camera.position.x = -10;
//照相机看向场景的位置
camera.lookAt(scene.position);
//把照相机放到场景里
scene.add(camera)

//4.创建物体  几何体 + 材质

//4.1创建几何体
let boxGeometry = new THREE.BoxGeometry(5,5,5);

//4.2创建材质
let boxMaterial= new THREE.MeshBasicMaterial({
    color:0xfff000,
    // wireframe:true //渲染线不渲染面
})

//4.3创建物体  第一个参数是几何体  第二个参数是材质
let box = new THREE.Mesh(boxGeometry,boxMaterial);
box.position.y = 3;

scene.add(box);

//创建一个平面

//1.创建平面的几何体
let planeGeometry = new THREE.PlaneGeometry(60,20);

let planeMaterial = new THREE.MeshBasicMaterial({
    color:0xcccccc
})

let plane = new THREE.Mesh(planeGeometry,planeMaterial);

plane.rotation.x = -0.5*Math.PI;  //旋转90
plane.position.x = 10;

scene.add(plane)

//辅助线
let axes= new THREE.AxesHelper(400); //辅助线的长度

scene.add(axes);

renderer.render(scene,camera);


